body {
  background-color:rgb(218, 229, 245);
}
.first-container {
  height: 100%;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 5px  5px   5px ;
  box-sizing: border-box;

  .header {
    padding: 0;
    height: 40px;
    background: #fff;
    text-align: center;
    margin-bottom: 10px;
    box-sizing: border-box;

    .dg-view-menu {
      padding-left: 10px;
      border-bottom: 2px solid #8052c4;
    }
  }

  .second-container {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    overflow: hidden;

    .card-wrapper {
      width: 23.5%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      overflow: hidden;
      box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);
      box-sizing: border-box;
      .card-row{
        height: 6.8%;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        //border: #eeeeee 1px solid;
        .serial{
          height: 100%;
          width: 10%;
          font-size: 30px;
          text-align: center;
          line-height: 220%;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
          background: linear-gradient(30deg,#eee,#fff,#eee);;
          border: #eeeeee 1px solid;
        }
        .one-card{
          width: 44%;
          border: #eeeeee 1px solid;
          height: 100%;
          background-color: rgb(250, 250, 250);
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          //box-shadow: 2px 2px 2px 2px rgb(0 0 0 / 10%);
          box-sizing: border-box;
          overflow: hidden;

          .titles{
            height: 50%;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            overflow: hidden;/*超出部分隐藏*/
            text-overflow: ellipsis;/*文字超出部分以省略号显示*/
            white-space: nowrap;/*内容超宽后禁止换行显示*/
            flex-direction: row;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            text-align: center;
            line-height: 150%;

            .locationList{
              width: 50%;
              height: 100%;
              display: flex;
              flex-direction: row;
              box-sizing: border-box;
              border-right: 1px solid #eee;
              border-left: 1px solid #eee;

              .location{
                width: 25%;
                font-size: 10px;
                //text-align: left;
                margin-right: 15px;
              }
              .place{
                flex: 1 1 auto;
                font-size: 15px;
                //text-align: left;
                text-shadow: 1px 0px 0 rgba(0, 0, 0, .8);
              }
            }

            .materialCodeList{
              width: 60%;
              height: 100%;
              display: flex;
              flex-direction: row;
              border-right: 1px solid #eee;
              box-sizing: border-box;
              .materialCode{
                width:25%;
                height: 100%;
                font-size: 10px;
                //text-align: left;
                margin-right: 15px;
              }
              .code{
                flex: 1 1 auto;
                font-size: 10px;
                //text-align: left;
                padding-left: 10px;
                box-sizing: border-box;
              }
            }

          }
          .progress{
            padding-left: 5px;
            flex: 1;
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
          }
          .numbers{
            height: 50%;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            overflow: hidden;/*超出部分隐藏*/
            text-overflow: ellipsis;/*文字超出部分以省略号显示*/
            white-space: nowrap;/*内容超宽后禁止换行显示*/
            flex-direction: row;
            justify-content: space-between;
            border-top: 1px solid #eee;
            border-left: 1px solid #eee;
            line-height: 180%;
            border-right: 1px solid #eee;

            .capacity{
              width: 50%;
              height: 100%;
              display: flex;
              flex-direction: row;
              box-sizing: border-box;
              justify-content: space-evenly;

              .capacityTitle{
                width: 28%;
                font-size: 10px;
                color: #909399;
                text-align: left;
                margin-right: 15px;
                margin-left:10px;
              }
              .capacityPlace{
                flex: 1;
                font-size: 10px;
                text-align: left;
                padding-left: 12px;
              }
            }
          }
        }
      }
      //底部线条
      .arrow-down{
        height:20px;
        width: 100%;
        overflow: hidden;
        position: relative;
        background-color: #f8f8fa;
      }
      .card-row:last-child{
        height: 7%;
      }
    }
  }
}

//.recommend:after{
//  position: absolute;
//  left:4px;
//  top: 3px;
//  content:'💡';
//  width: 50px;
//  height: 50px;
//  display: inline-block;
//}
.recommend{
  position: relative;
  font-weight: 600;
  color: black;
  font-size: 26px;
  background-color: #00BFFF !important;
  //background: linear-gradient(30deg,#00BFFF, #00BFFF,#00BFFF)!important;
  background: linear-gradient(0deg, transparent 50%, #fff 50%) repeat-y,   // 左边框
  linear-gradient(0deg, transparent 50%, #fff 50%) repeat-y,  // 右边框
  linear-gradient(90deg, transparent 50%, #fff 50%) repeat-x, // 上边框
  linear-gradient(90deg, transparent 50%, #fff 50%) repeat-x; // 下边框

  // 分别对应上面四个背景的size，比如第一个1px 12px表示左边框背景填充宽1px,高12px;
  // 此处的高指的是是一个透明横线+一个有颜色横线的高，并不是指整体高度，可理解为线段的密度
  // 左边框的高度是由多个12px的高度线段构成的
  background-size: 2px 12px, 2px 12px, 12px 2px, 12px 2px;

  // 分别对应上面四个背景的position，比如第一个0 0表示边框位于容器x轴原点、y轴原点;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: shine 1s infinite linear;
  .numbers1{
    font-weight: 600;
    font-size: 36px;
    line-height: 80% !important;
    text-align: left;
  }
  .capacityTitle,.capacityPlace{
    color: black !important;
  }
  .titles1{
    line-height: 80% !important;
    font-size: 36px;
    font-weight: 600;
  }
}
@keyframes shine {
  from {
  }
  to {
    // 比如第一个表示0 -12px在动画中表示左边框一秒内上移12px,视觉上就形成了向上滑动的效果
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

.serial2{
  //background-color: #08ab0a !important;
  background: linear-gradient(30deg,#00BFFF, #90d3ea,#00BFFF)!important;
  color: black;
}

// FGLocation的样式

.FG-card-wrapper{
  height: 8%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.serial3{
  //background-color: #08ab0a !important;
  background: #D3D3D3 !important;
}

.recommend2{
  width: 44%;
  border: #eeeeee 1px solid;
  height: 100%;
  background-color: #D3D3D3   !important;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  //box-shadow: 2px 2px 2px 2px rgb(0 0 0 / 10%);
  box-sizing: border-box;
  overflow: hidden;

  .titles{
    height: 50%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;/*超出部分隐藏*/
    text-overflow: ellipsis;/*文字超出部分以省略号显示*/
    white-space: nowrap;/*内容超宽后禁止换行显示*/
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    text-align: center;
    line-height: 150%;

    .locationList{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: row;
      box-sizing: border-box;
      border-right: 1px solid #eee;
      border-left: 1px solid #eee;

      .location{
        width: 25%;
        font-size: 10px;
        //text-align: left;
        margin-right: 15px;
      }
      .place{
        flex: 1 1 auto;
        font-size: 15px;
        //text-align: left;
        text-shadow: 1px 0px 0 rgba(0, 0, 0, .8);
      }
    }

    .materialCodeList{
      width: 60%;
      height: 100%;
      display: flex;
      flex-direction: row;
      border-right: 1px solid #eee;
      box-sizing: border-box;
      .materialCode{
        width:25%;
        height: 100%;
        font-size: 10px;
        //text-align: left;
        margin-right: 15px;
      }
      .code{
        flex: 1 1 auto;
        font-size: 10px;
        //text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
      }
    }

  }
  .progress{
    padding-left: 5px;
    flex: 1;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }
  .numbers{
    height: 50%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;/*超出部分隐藏*/
    text-overflow: ellipsis;/*文字超出部分以省略号显示*/
    white-space: nowrap;/*内容超宽后禁止换行显示*/
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    line-height: 180%;
    border-right: 1px solid #eee;

    .capacity{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: row;
      box-sizing: border-box;
      justify-content: space-evenly;

      .capacityTitle{
        width: 28%;
        font-size: 10px;
        color: #909399;
        text-align: left;
        margin-right: 15px;
        margin-left:10px;
      }
      .capacityPlace{
        flex: 1;
        font-size: 10px;
        text-align: left;
        padding-left: 12px;
      }
    }
  }
}


